import React from 'react';
import styles from '@/assets/css/detail.module.css';
import type room from '@/types/room';
import { MultiMarker, TMap } from 'tlbs-map-react';
import type comment from '@/types/comment';

export default function Info()
{
    const [SearchParams] = useSearchParams();

    // 定义状态变量
    const [roomid] = useState<string|null>(SearchParams.get('roomid') ? SearchParams.get('roomid') : '');
    const [info,SetInfo] = useState<room>({} as room);
    const [CommentData,SetCommentData] = useState<comment[]>([]);

    // 样式
    const style = {
        multiMarkerStyle1: {
            width: 20,
            height: 30,
        }
    };

    const GetInfoData = async () =>
    {
        const params = {
            roomid
        }

        const result = await React.http.post('/room/info',params);

        if(result.code === 1)
        {
            SetInfo(result.data.info);
            SetCommentData(result.data.CommentData);
        }else{
            React.fail(result.msg,() =>
            {
                React.navigate(-1);
            });
        }
    }

    useEffect(() =>
    {
        GetInfoData();
    },[roomid]);

    const OnConfirm = () =>
    {
        if(!React.business || Object.getOwnPropertyNames(React.business).length === 0)
        {
            React.confirm({
                title:'登录',
                content:'是否确认进行登录操作？',
                onConfirm:() =>
                {
                    React.Cookies.save('redirect',`/room/info?roomid=${roomid}`,{path:'/'});

                    React.navigate('/business/login');
                }
            });

            return false;
        }

        if(info.status === false) return false;

        React.navigate(`/room/confirm?roomid=${roomid}`);
    }

    return (
        <>
            <React.UI.Image src={info.thumb_text} height={213} fit='cover' />

            <div className={styles.detail_top}>
                <div id="intro" className={styles.intro}>
                    <div className={styles.title}>{info.name}</div>
                    <div className={styles.betwee}>
                        <div className={styles.left}>
                            {
                                info.flag && info.flag_text.map((val: string, index: number) =>{
                                    return(
                                        <span key={index}>{val}</span>
                                    )
                                })
                            }
                        </div>
                    </div>
                    <div className={styles.title}>{info.content}</div>
                </div>

                {/* 预定需知 */}
                <div className={styles.notesin}>
                    <div className={styles.title}>预订须知</div>
                    <div className={styles.item}>
                        <span className={styles.tips}>预订房型：</span>
                        <span>{info.name}</span>
                    </div>
                    <div className={styles.item}>
                        <span className={styles.tips}>入离时间：</span>
                        <span>当天 12:00 后入住，次日 12:00 前退房</span>
                    </div>
                    <div className={styles.item}>
                        <span className={styles.tips}>剩余房间数量：</span>
                        <span>{info.total}</span>
                    </div>
                </div>

                {/* 地图 */}
                <div className={styles.notesin}>
                    <TMap
                        apiKey="Y7RBZ-7FGCW-ZPSRT-YXWHH-VRRNE-FZFZL"
                    >
                        <MultiMarker
                            geometries={[
                                {
                                    id:'1',
                                    styleId: 'multiMarkerStyle1',
                                    position:{lat:39.98210863924864,lng:116.31310899739151}
                                }
                            ]}
                            styles={style}
                            options={
                                {
                                    // minZoom:1,
                                    // maxZoom:17.2
                                }
                            }
                        />
                    </TMap>
                </div>

                {/* 评价 */}
                <div id="comment" className={styles.comment}>
                    <div className={styles.title}>评价</div>
                    <React.UI.List style={{ '--border-top': '0', '--border-bottom': '0' }}>
                        {CommentData.length > 0 && CommentData.map((item:comment) => (
                            <div className={styles.rate_list_item} key={item.id}>
                                <div className={styles.item_content}>
                                    <div className={styles.content_prefix}>
                                        <div className={styles.ratelist}>
                                            <div className={styles.image}>
                                                <img src={item.business.avatar_cdn} alt="" />
                                            </div>
                                            <p className={styles.nickname}>{item.business.nickname}</p>
                                        </div>
                                    </div>
                                    <div className={styles.content_main}>
                                        <div className={styles.rate}>
                                            <React.UI.Rate readOnly value={item.rate} style={{ '--star-size': '18px' }} />
                                        </div>
                                        <div className={styles.item_description}>
                                            <p>{item.content}</p>
                                            <p className={styles.item_time}>{item.createtime_text}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </React.UI.List>

                    <React.UI.AutoCenter>
                        {
                            CommentData && CommentData.length > 0 ? <Link to={`/room/comment?roomid=${roomid}`}>查看更多评价</Link> : <div>暂无评价</div>
                        }
                    </React.UI.AutoCenter>
                </div>
            </div>

            <div className={styles.foot_bar}>
                <div className={styles.price}>
                    ￥{info.price}
                </div>
                <React.UI.Button color='primary' size={'small'} onClick={OnConfirm}>{info.status === true ? '立即预定' : '已预定满'}</React.UI.Button>
            </div>
        </>
    )
}